<template>
  <Layout :footer="false" ref="layout" backTopClass="backTopClass">
    <DetailHeader :title="data.title" :index="currentIndex" :data="data" @change="clickGuideMenu" :top="top" @onShare="isShare = !isShare"/>
    <section class="detail_container" :class="{'fixedHeader': top < 1}" v-loading="loading">
        <div v-show="currentIndex === 0">
          <overview v-if="!isMobile" class="swiper" v-model="slideIndex" @changeIndex="handleChangeOverView">
            <template v-for="(item, index) in data.gallery">
              <div class="slide-box" style="justify-content: center;" :key="'slide_' + index"><Gallery :data="item.data" :imageStyle="item.image_style"/></div>
            </template>
            <FooterBar style="margin-top: 64px"/>
          </overview>
          <!-- <swiper ref="myswiper1" v-if="!isMobile" class="swiper pc" :options="swiperOption" @transitionStart="transitionStart">
            <template v-for="(item, index) in data.gallery">
              <swiper-slide :key="'slide_' + index">
                <div class="slide-box"><Gallery :data="item.data" :imageStyle="item.image_style"/></div>
              </swiper-slide>
            </template>
          </swiper> -->
          <div class="slide-box app" v-if="isMobile">
            <template v-for="(item, index) in data.gallery" >
              <Gallery :data="item.data" :imageStyle="item.image_style" style="margin-bottom: 0px" :key="index"/>
            </template>
            <FooterBar/>
          </div>
        </div>
        <div v-show="currentIndex === 1">
          <div class="content"><Parameter :title="data.title" :image="data.image" :data="data.parameter"/><FooterBar /></div>
        </div>
        <div v-show="currentIndex === 2">
          <div class="content"><Instructions :title="data.title" :image="data.image" :data="data.instructions"/><FooterBar /></div>
        </div>
        <div v-show="currentIndex === 3">
          <div class="content"><Reviews /><FooterBar /></div>
        </div>
        <div v-show="currentIndex === 4">
          <div class="content"><Recommendation :data="data.recommendationData"/><FooterBar /></div>
        </div>
    </section>
    <div class="product_detail_buy-btn" :class="{'disable': !data.amazon_buy_link}">
      <el-button type="search" class="button" @click="openLink(data.amazon_buy_link)">{{data.amazon_buy_link ? $t('DEFAULT.BUYONAMAZON') : 'Unavallable for your area'}}</el-button>
    </div>
    <ShareDialog :visible.sync="isShare" @closeDialog="isShare = false" :product="data"></ShareDialog>
    <ShareButton @toTop="toTop" :show="currentIndex > 0" :product="data"/>
  </Layout>
</template>

<script>
  import Layout from '@/views/layout/index'
  import { FooterBar } from '@/views/layout/components'
  import { Swiper, SwiperSlide } from 'vue-awesome-swiper'
  // import 'swiper/css/swiper.css'

  import { mapGetters } from 'vuex'
  import { getProductDetail }  from '@/api/product.js'
  import { timeFormat, isPc, isMobile } from '@/utils/index.js'
  import Overview from './components/overview'
  import Gallery from './components/gallery.vue'
  import Parameter from './components/parameter.vue'
  import Instructions from './components/instructions.vue'
  import Reviews from './components/reviews'
  import Recommendation from './components/recommendation.vue'
  import ShareButton from './components/share.vue'
  import DetailHeader from './components/header.vue'
  import { ShareDialog} from './components'
  import { productAmazonButtonClickFunc } from '@/utils/kanban.js'
  const debounce = require('lodash/debounce')

  export default {
    components: {
      Layout,
      FooterBar,
      Swiper,
      SwiperSlide,
      Overview,
      Gallery,
      Parameter,
      Instructions,
      Reviews,
      Recommendation,
      ShareButton,
      DetailHeader,
      ShareDialog
    },
    data() {
      return {
        isShare: false,
        replayShow: false,
        loading: false,
        top: 65,
        slideIndex: 0,
        currentIndex: 0,
        swiperOption1: {
          speed: 800,
          mousewheel: false,
          watchSlidesProgress : true,
          watchSlidesVisibility : true,
          autoHeight: true,
        },
        swiperOption: {
          direction: 'vertical',
          speed: 800,
          slidesPerView: 'auto',
          mousewheel: true,
        },
        swiperVerticalOption: {
          direction: 'vertical',
          slidesPerView: 'auto',
          freeMode: true,
          autoHeight: true,
          nested:true,
          speed: 100,
          // spaceBetween: 30,
          scrollbar: {
            el: '.swiper-scrollbar',
            draggable: true,
          },
          mousewheel: {
            // thresholdTime: 2000,
          },
        },

        data: {
          gallery: []
        },
      }
    },
    created() {
      this.getDetailData()
    },
    watch: {
      $route(){
        this.currentIndex = 0
        this.getDetailData()
      },
    },
    mounted() {
      this.$nextTick(() => {
        this.top = this.headerEL.clientHeight
        this.__top = this.top
        this.headerEL.style.transition = 'all .6s'
        this.headerEL.style.backgroundColor = 'white'
        this.headerEL.style.position = 'fixed'
        document.getElementById("rampow").style.overflow = 'auto'
        if(this.isPc) {
          this.headerEL.style.overflow = 'hidden'
          this.onScroll(true)
        }
      })
    },
    destroyed() {
      if(this.isPc) {
        this.onScroll(false)
      }
    },
    computed: {
      ...mapGetters(['menuArray', 'curSite', 'isPhone']),
      // swiper1() {
      //   return this.$refs.myswiper1.$swiper
      // },
      headerEL() {
        return this.$refs.layout.headerEL
      },
      isMobile() {
        return isMobile()
      },
      isPc() {
        return isPc()
      },
    },
    methods: {
      handleChangeOverView(i) {
        if(i > 0) {
          this.setHeaderStyle(0)
        } else {
          this.setHeaderStyle(this.__top)
        }
      },
      getDetailData () {
        this.loading = true
        let set_Link = this.$route.params.id + this.$route.hash
        let params = {
          site_id: this.curSite.id,
          set_link: set_Link,
          local_time: timeFormat(new Date()).split(' ')[0],
        }
        getProductDetail(params).then(res=>{
          if (res.state == 1){ 
            this.data = res.data
          }
        }).finally(() => {
          this.loading = false
        })
      },
      setHeaderStyle(top) {
        if(top * 1 === 0) {
          this.top = top
          this.headerEL.style.height = '0'
          this.headerEL.style.overflow = 'hidden'
          setTimeout(() => {
            this.headerEL.style.transition = 'none'
          }, 600)
        } else {
          this.top = top
          this.headerEL.style.height = `${top}px`
          this.headerEL.style.overflow = 'visible'
          setTimeout(() => {
            this.headerEL.style.transition = 'all .6s'
          }, 600)
        }
      },
      setHeader: debounce(function() {
        if(document.body.clientHeight - window.innerHeight > 136) {
          if(document.documentElement.scrollTop > 10 ) {
            this.setHeaderStyle(0)
          } else {
            this.setHeaderStyle(this.__top)
          }
        }
      }, 100),
      onScroll(bool) {
        if(bool) {
          window.addEventListener('scroll', this.setHeader)
        } else {
          window.removeEventListener('scroll', this.setHeader)
        }
      },
      clickGuideMenu(i) {
        this.currentIndex = i
        if(i === 0 && this.slideIndex !== 0) {
          setTimeout(() => {
            this.setHeaderStyle(0)
          })
        } else {
          setTimeout(() => {
             this.setHeaderStyle(this.__top)
             window.scrollTo({
              top: 0,
              behavior: 'smooth'
            })
          })
          // this.setHeaderStyle(this.__top)
        }
      },
      openLink (link) {
        if(!link) return
        let url = link
        if (url.indexOf('http')  == -1){
          url = 'http://' +link
        }
        productAmazonButtonClickFunc(this.data.product_name)
        window.open(url, '_blank')
      },
      toTop(_, last) {
        // if(last) {
        //   this.swiper.slideTo(0, 800)
        // }
      }
    }
  }
</script>

<style lang="scss">
  .backTopClass {
    margin-bottom: 33px;
  }
  @media screen and (max-width: 768px) { 
    .backTopClass {
      margin-bottom: 48px;
    }
  }
</style>

<style lang="scss" scoped>
  @import '@/styles/product/productDetails.scss';
  .detail_container {
    width: 100vw;
    .swiper {
      height: 100vh;
      box-sizing: border-box;
    }
    .slide-box {
      box-sizing: border-box;
      height: 100%;
      display: flex;
      flex-direction: column;
      // justify-content: center;
      // padding-top: 136px;
      justify-content: space-between;
      min-height: 100vh;
      transition: all .6s;
      &:first-child {
        .detail_gallery {
          padding-top: 134px;
        }
      }
    }
    .content {
      height: 100%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      min-height: 100vh;
    }
    // .slide-box + .slide-box {
    //   /deep/ .imageTextStyle1-4 {
    //     padding-top: 40px;
    //   }
    // }
    .pc {
      display: block;
    }
    .app {
      display: none;
    }
  }
  .detail_container.fixedHeader {
    .slide-box {
      box-sizing: border-box;
      height: 100%;
      padding-top: 0;
    }
  }
  .product_detail_buy-btn {
    display: none;
  }
  @media screen and (max-width: 768px) { 
    .detail_container {
      padding-bottom: 62px;
      .slide-box {
        padding-top: 136px;
        .detail_gallery {
          padding-top: 0px !important;
          &:first-child {
            margin-top: 20px;
          }
        }
      }
      .pc {
        display: none;
      }
      .app {
        display: block;
      }
    }
    .product_detail_buy-btn {
      position: fixed;
      bottom: 0;
      left: 0;
      display: block;
      display: flex;
      width: 100%;
      padding: 12px 20px;
      background: white;
      z-index: 99;

      .button {
        width: 100%;
        height: 40px;
        border-radius: 5px;
        background: #6C7E59;
        color: #ffffff;
        border: none;
      }
    }
    .product_detail_buy-btn.disable {
      // background: #DEE0DB;
      cursor: not-allowed;
      .button {
        background: #DEE0DB;
        border: 0;
      }
    }
  }
</style>